<template>
	<view class="app">
		<!-- 返回按钮 -->
		<!-- #ifdef H5 -->
		<!-- <view class="back-btn" :style="{top:'48rpx'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- <view class="back-btn" :style="{top:$xyfun.xysys().top+'px'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->

		<!-- 顶部视频区域 -->
		<view class="imgbox">
			<video class="img" :src="videoSrc" autoplay loop controls="false" object-fit="fill"></video>
		</view>

		<!-- 选项卡区域 -->
		<view class="box_top"></view>
		<view class="box_center">
			<view class="tabs" :style="{ '--tab-index': currentTab }">
				<view class="tabs-header">
					<view v-for="(item, index) in tabList" :key="index" class="tab-item"
						:class="{ 'u-tab-item-active': currentTab === index }" @tap="tabChange(index)">
						{{ item.category.category_name }}
					</view>
				</view>
			</view>

			<!-- 商品列表区域 -->
			<view class="box_toptab" v-for="(list, listIndex) in tabList" :key="listIndex"
				v-if="currentTab === listIndex">
				<view class="box_top1" v-for="(item, index) in list.products" :key="index"
					@tap="chcketext(item, listIndex)">
					<!-- 商品图片 -->
					<image class="u-skeleton-fillet" :src="item.image"
						style="width: 100%; height: 147rpx; border-radius: 7rpx" @tap="chckvideo(item)"
						@load="imgout" />

					<!-- 商品信息 -->
					<view class="box_top2 u-skeleton-fillet">
						<view :class="['color', currentSelectId === item.id? 'color1' : 'color2']">
							{{ item.name }}
						</view>
						<image v-if="currentSelectId === item.id" class="box_img" mode="widthFix"
							src="/static/arrow-left.png" />
					</view>

					<!-- 价格和数量选择 -->
					<view class="box_top3">
						<view>
							<text class="u-skeleton-fillet">￥{{ item.price }}</text>
						</view>
						<view class="u-number-box">
							<text class="minus" :class="{ 'u-number-box--disabled': item.num <= 0 }"
								@tap="handleMinus(listIndex, index)">-</text>
							<input type="number" v-model="item.num" class="u-number-box__input"
								@input="handleInput($event, listIndex, index)" />
							<text class="plus" @tap="handlePlus(listIndex, index)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部结算区域 -->
		<view class="box_buttn">
			<view class="box_buttn1">
				<view class="box_buttn_txt1">￥{{ totalPrice }}</view>
				<view class="box_buttn_txt2">锁定订单后预计 4 - 8 周支付</view>
			</view>
			<view class="box_buttn2">
				<!-- <button class="box_buttns" @tap="$xyfun.to('/pages/joinUs/order')">去结算</button> -->
				<button class="box_buttns" @click="preview">去结算</button>
				<image class="box_buttn_jian" mode="widthFix"
					src="https://cdn.deletennis.com/join2/21860674-24316838-26P2.png" />
			</view>
		</view>

		<!-- 视频预览弹窗 -->
		<view class="popup" v-if="isShowPop">
			<!-- 遮罩层 -->
			<view class="popup-mask" @tap="closePopup" hover-stop-propagation></view>

			<!-- 弹窗内容 -->
			<view class="popup-content">
				<!-- 关闭按钮 -->
				<view class="popup-close" @tap="closePopup">
					<text class="xyicon icon-close"></text>
				</view>

				<!-- 视频播放器 -->
				<view class="popup-content-box">
					<video v-if="previewVideo" :src="previewVideo" autoplay controls loop class="video-player"
						show-fullscreen-btn></video>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoSrc: 'https://cdn.deletennis.com/join2/tag1.mp4',
				currentTab: 0,
				currentSelectId: 1,
				isShowPop: false,
				previewVideo: '',
				tabList: [
					// {
					// 	name: '广告'
					// },
					// {
					// 	name: '灯具'
					// },
					// {
					// 	name: '软装'
					// }
				],
				productLists: [
					// // 广告列表
					// [{
					// 		id: 1,
					// 		name: '广告字',
					// 		price: '720',
					// 		image: 'https://cdn.deletennis.com/join2/df1.png',
					// 		vidsrc: 'https://cdn.deletennis.com/join2/tag1.mp4',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 2,
					// 		name: '装置灯箱',
					// 		price: '1280',
					// 		image: 'https://cdn.deletennis.com/join2/df2.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 3,
					// 		name: '滚动屏',
					// 		price: '2800',
					// 		image: 'https://cdn.deletennis.com/join2/df3.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 4,
					// 		name: '方寸海报',
					// 		price: '180',
					// 		image: 'https://cdn.deletennis.com/join2/df4.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 5,
					// 		name: 'A3海报展架',
					// 		price: '280',
					// 		image: 'https://cdn.deletennis.com/join2/df5.png',
					// 		num: 0,
					// 	}
					// ],
					// // 灯具列表
					// [{
					// 	id: 6,
					// 	name: 'LED灯',
					// 	price: '68',
					// 	image: 'https://cdn.deletennis.com/join2/df6.png',
					// 	num: 0,
					// }],
					// // 软装列表
					// [{
					// 		id: 7,
					// 		name: '长凳',
					// 		price: '1360',
					// 		image: 'https://cdn.deletennis.com/join2/df7.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 8,
					// 		name: '开关',
					// 		price: '68',
					// 		image: 'https://cdn.deletennis.com/join2/df8.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 9,
					// 		name: '垃圾桶',
					// 		price: '128',
					// 		image: 'https://cdn.deletennis.com/join2/df9.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 10,
					// 		name: '衣架',
					// 		price: '128',
					// 		image: 'https://cdn.deletennis.com/join2/df10.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 11,
					// 		name: '消防架',
					// 		price: '360',
					// 		image: 'https://cdn.deletennis.com/join2/df11.png',
					// 		num: 0,
					// 	},
					// 	{
					// 		id: 12,
					// 		name: 'GT网球*100',
					// 		price: '600',
					// 		image: 'https://cdn.deletennis.com/join2/df12.png',
					// 		num: 0,
					// 	}
					// ]
				]
			}
		},
		computed: {
			totalPrice() {
				let total = 0;
				this.tabList.forEach(list => {
					list.products.forEach(item => {
						total += item.num * Number(item.price);
					});
				});
				return total;
			}
		},
		onLoad() {
			this.getCategoryProduct();
		},
		methods: {
			retushan() {
				uni.navigateBack();
			},
			tabChange(index) {
				this.currentTab = index;
				this.currentSelectId = this.tabList[index]?.products[0]?.id || 1;
			},
			chcketext(item, listIndex) {
				this.currentSelectId = item.id;
			},
			chckvideo(item) {
				this.previewVideo = item.vidsrc;
				this.isShowPop = true;
			},
			imgout() {
				// 图片加载完成回调
			},
			valChange(value, listIndex, index) {
				this.tabList[listIndex].products[index].num = value;
			},
			preview() {
				// 去结算
				const selectedProducts = [];
				this.tabList.forEach(list => {
					list.products.forEach(item => {
						if (item.num > 0) {
							selectedProducts.push(item);
						}
					});
				});
				uni.removeStorage({
					key: 'selectedProducts'
				});
				uni.setStorageSync('selectedProducts', selectedProducts);
				uni.navigateTo({
					url: '/pages/joinUs/order'
				})
			},
			handleMinus(listIndex, index) {
				const item = this.tabList[listIndex].products[index];
				if (item.num > 0) {
					item.num--;
					this.valChange(item.num, listIndex, index);
				}
			},
			handlePlus(listIndex, index) {
				const item = this.tabList[listIndex].products[index];
				item.num++;
				this.valChange(item.num, listIndex, index);
			},
			handleInput(e, listIndex, index) {
				const value = parseInt(e.detail.value) || 0;
				this.tabList[listIndex].products[index].num = value;
				this.valChange(value, listIndex, index);
			},
			closePopup() {
				this.isShowPop = false;
				this.previewVideo = '';
			},
			// 获取数据
			getCategoryProduct() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/join_products/getCategoriesAndProducts',
						loadingTip: '加载中...',
						success: res => {
							console.log(res);
							this.tabList = res.map(item => {
								return {
									...item,
									products: item.products.map(product => {
										return {
											...product,
											num: 0
										};
									})
								};
							});
						}
					});
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #000;
	}
</style>
<style lang="scss" scoped>
	$bottomHeight: 190rpx;
	$videoHeight: 663rpx;

	.back-btn {
		position: fixed;
		left: 16rpx;
		z-index: 100;
		width: 54rpx;
		height: 54rpx;
	}

	.back-btn image {
		width: 54rpx;
		height: 54rpx;
	}

	.app {
		height: 100vh;
		position: relative;
		padding-bottom: $bottomHeight;
	}

	.imgbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: $videoHeight;
		overflow: hidden;
		z-index: 10;

		.img {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: fill;
		}
	}

	.box_top {
		display: flex;
		justify-content: space-between;
		padding: 0 25rpx;
		position: absolute;
		top: 563rpx;
		width: 100%;
	}

	.box_center {
		padding-bottom: $bottomHeight;
		padding-top: $videoHeight;
	}

	.tabs {
		position: relative;
		// 定义CSS变量，默认值为0
		--tab-index: 0;

		.tabs-header {
			display: flex;
			justify-content: center;

			.tab-item {
				padding: 0 30rpx;
				color: #626465;
				font-size: 34rpx;
				height: 60rpx;
				line-height: 60rpx;
				position: relative;

				&.u-tab-item-active {
					color: #fff !important;
					font-weight: bold;
				}
			}
		}

		// 修改底部滚动条样式
		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -6rpx;
			width: 40rpx;
			height: 4rpx;
			background: #fff;
			border-radius: 2rpx;
			transform: translateX(-50%);
			transition: all 0.3s ease-in-out;
			margin-left: calc((var(--tab-index) - 1) * 130rpx);
		}
	}

	.box_toptab {
		color: #626465;
		display: flex;
		flex-wrap: wrap;
		font-weight: 700;
		margin-top: 39rpx;
		padding-left: 15rpx;
		width: 100%;

		.box_top1 {
			border-radius: 9rpx;
			height: 271rpx;
			margin-left: 15rpx;
			position: relative;
			width: 339rpx;

			.fanmax {
				position: absolute;
				right: 9rpx;
				top: 9rpx;
			}

			.box_img {
				height: 32rpx;
				transform: rotate(180deg);
				width: 32rpx;
			}
		}

		.box_top2 {
			align-items: center;
			display: flex;
			margin-top: 5rpx;

			.color1 {
				color: #fff;
			}

			.color2 {
				color: #626465;
			}
		}

		.box_top3 {
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin-top: 5rpx;
		}
	}

	.box_buttn {
		box-sizing: border-box;
		align-items: center;
		background-color: #1b1e23;
		bottom: 0;
		display: flex;
		height: $bottomHeight;
		justify-content: space-between;
		left: 0;
		padding: 29rpx;
		position: fixed;
		width: 100%;
		z-index: 1000;

		.box_buttn1 {
			color: #fff;

			.box_buttn_txt1 {
				font-size: 36rpx;
				font-weight: 700;
			}

			.box_buttn_txt2 {
				color: #949392;
				font-size: 23rpx;
				margin-top: 9rpx;
			}
		}

		.box_buttn2 {
			color: #fff;
			position: relative;

			.box_buttns {
				align-items: center;
				background-color: #fb4500;
				border-radius: 7rpx;
				color: #fff;
				display: flex;
				font-size: 25rpx;
				height: 79rpx;
				width: 197rpx;
			}

			.box_buttn_jian {
				height: 29rpx;
				position: absolute;
				right: 27rpx;
				top: 27rpx;
				width: 34rpx;
			}
		}
	}

	.video-player {
		width: 638rpx;
		height: 577rpx;
		object-fit: contain;
	}

	// 数字输入框样式
	.u-number-box {
		display: flex;
		align-items: center;

		.minus,
		.plus {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			line-height: 22rpx;
			color: #fff;
			border-radius: 50%;
			border: 1rpx solid #fff;
			background-color: #000;
		}

		&__input {
			width: 40rpx;
			height: 26rpx;
			margin: 0 4rpx;
			padding: 0;
			font-size: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #fff;
			background-color: #000;
		}
	}

	// 弹窗样式
	.popup {
		.popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 10073;
			transition: all 0.25s ease-in-out;
		}

		.popup-content {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 692rpx;
			height: 672rpx;
			background: #fff;
			border-radius: 9rpx;
			overflow: hidden;
			z-index: 10075;
			animation: zoom-in 0.25s ease-in-out;

			.popup-close {
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				width: 36rpx;
				height: 36rpx;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #909399;
			}

			.popup-content-box {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				padding: 68rpx 24rpx 24rpx;
				display: flex;
				justify-content: center;

				.video-player {
					width: 638rpx;
					height: 577rpx;
					object-fit: contain;
				}
			}
		}
	}

	@keyframes zoom-in {
		from {
			transform: translate(-50%, -50%) scale(0);
			opacity: 0;
		}

		to {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}
</style>